<template>
	<view class="container1">
		<view class="search" :style=" {'background-color': bgcolor}" >
			<input :disabled="disabled" @click="toSearch" class="search-box" type="text"  :style="{'border-radius':redius+'px'}" placeholder="搜索" @input="inputHandler">
				<image :hidden="flag" src="../../static/search.png" mode=""></image>
			</input>
		</view>
	</view>
</template>

<script>
	export default {
		name:'search',
		props:{
			//背景颜色
			bgcolor:{
				type:String,
				default:'#C00000'
			},
			// 圆角尺寸
			redius:{
				type:Number,
				default: 18
			},
			disabled:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return { flag:false }
		},
		methods:{
			toSearch(){
				this.$emit('toSearch',this.disabled)
			},
			inputHandler(e){
				this.flag = e.detail.value ?true:false
				this.$emit('sendSearchData',e.detail.value)
				console.log('1111')
			}
		}
	}
</script>

<style lang="scss">
	.container1{
		height: 94rpx;
		width: 600rpx;
	}
.search{
	width: 100%;
	// background-color: #C00000;
	position: fixed;
	z-index: 1;
	image{
		width: 55rpx;
		height: 55rpx;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 40%;
		transform: translateX(-50%) translateY(45%);
	}
	padding: 15rpx 24rpx;
	.search-box{
		width: 700rpx;
		text-align: center;
		color: white;
		background-color: white;
		height: 70rpx;
		// border-radius: 40rpx;
		color: black;
		font-size: 28rpx;
		position: relative;
		}
	

}
</style>